<template>
	<view class="p-25">
		<view class="dr-content  bg-white br10 p-l-35 p-r-20 p-t-30 p-b-32">
			<view class="dr-img">
				<image :src="drData.avatar" mode="widthFix"></image>
			</view>
			<view class="m-l-34">
				<view class="top-content flex row-between">
					<view class="flex" style="width: 300rpx;">
						
			
					<view class="name xl bold" >
						{{drData.driver_name}}
					</view>
					<view class="colllect-title flex-content sm m-l-30" v-if="drData.collect.create_time">
						已收藏
					</view>
							</view>
					<!-- <view class=" flex-content sm m-l-30" style="width:120rpx ;" v-else>
					
					</view> -->
					<view class="">
						
					
					<view v-if="drData.collect.create_time" class="collect-btn flex-content" @click="delCollect">
						取消收藏
					</view>
					<view v-else class="collect-btn flex-content" @click="collectdr()">
						立即收藏
					</view>
					</view>
				</view>
				<view class="center-content m-t-18">
					<view class="end-order">
						接单数:{{drData.end_order}}
					</view>
					<view class="flex m-l-24">
						<block v-if="drData.star==0">
							暂无评分
						</block>
						<block v-else>
							评分:{{drData.star}}
						</block>
					</view>
				</view>
				<view class="collect-time p-10 m-t-32" v-if="drData.collect.create_time" style="display: inline-block;">
					<text class="m-r-10">收藏时间</text>
					{{drData.collect.create_time}}
				</view>
			</view>
		</view>
		<view class="car-img p-l-34 bg-white p-t-30 p-b-32 m-t-30 p-b-32" v-if="drData.right_img">
			<view class="car-img-title xxl">
				车身照片
			</view>
			<view class="flex m-t-36">
				<view class="img-content flex-content" @click="previewImage(0)">
					<image :src="drData.right_img" mode="widthFix"></image>
				</view>
				<view class="img-content flex-content m-l-50" @click="previewImage(1)">
					<image :src="drData.left_img" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bg-white p-lr-38 p-tb-28 br10 m-t-30 xxl" v-if="drData.spe">
	<!-- 		<view class="flex row-between">
				<view class="xxl">
					车牌号码
				</view>
				<view style="color: #807E7E;">
					{{drData.brand_model}}
				</view>
			</view> -->
			<view class="flex row-between m-t-30">
				<view class="xxl">
					车型
				</view>
				<view style="color: #807E7E;">
					{{drData.brand_model}}
				</view>
			</view>
			<view class="flex row-between m-t-30">
				<view class="xxl">
					车厢规格
				</view>
				<view style="color: #807E7E;">
					{{drData.spe}}
				</view>
			</view>
		</view>
		<u-modal v-model="showmodal" content="你确定要取消收藏?" title="取消提示" :show-cancel-button="true" @confirm="confirmdel"></u-modal>
	</view>
</template>

<script>
	import {getUserDriver,collectDriver,delCollectDri} from "@/api/user"
	export default {
		onLoad(option) {
			this.id=option.id
			this.dr_id=option.driver_id
			this.getDrHome()
		},
		data() {
			return {
				value:2,
				id:"",
				dr_id:"",
				showmodal:false,
				drData:{},
				imagesList:[]
			};
		},
		methods:{
			previewImage(current){
				uni.previewImage({
					current,
					urls:this.imagesList
				})
			},
			async confirmdel(){
				let res=await delCollectDri({
					id:this.drData.collect.id
				})
			if(res.code==1){
				this.$toast({
					title:"取消成功"
				})
					this.getDrHome()
			}
			},
			//收藏司机
			async collectdr(){
				let res=await collectDriver({
					driver_id:this.dr_id
				})
				if(res.code==1){
					this.$toast({
						title:"收藏成功"
					})
					this.getDrHome()
				}
			},
			//删除收藏司机
			async delCollect(){
				this.showmodal=true
			},
			//获取司机信息
			async getDrHome(){
				let res= await getUserDriver({driver_id:this.dr_id})
				this.drData=res.data
				this.imagesList.push(this.drData.left_img)
				this.imagesList.push(this.drData.right_img)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.car-img{
		border-radius: 10rpx;
	}
	.collect-time{
		color: #807E7E;
		background-color: #F4F4F4 ;
		border-radius: 10rpx;
		font-size: 26upx;
	}
	.end-order{
	
	}
	.center-content{
		display: flex;
			color: #807E7E ;
	}
	.img-content{
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
.dr-content{
	display: flex;
	.dr-img{
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
	.colllect-title{
		width: 120rpx;
		height: 48rpx;
		background-color: #F4F4F4 ;
		border-radius: 6rpx;
		color: #807E7E;
		font-weight: 600;
	}
}
.collect-btn{
	width: 164rpx;
	height: 56rpx;
	color:#E85631 ;
	border-radius:8rpx;
	font-weight: 600;
	border: 2rpx solid #E85631;
}
.p-lr-38{
	padding-right: 38rpx;
	padding-left: 38rpx;
}
.p-tb-28{
	padding-top: 28rpx;
	padding-bottom: 28rpx;
}
</style>
